<script setup>
import {reactive} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";

const routerGroup = reactive({
  router:useRouter(),
  route:useRoute(),
  linkHome(){
    this.router.push({name:"home"});
  },
  linkSellCar(){
    this.router.push({name:"sellCar"});
  },
  linkBuyCar(){
    this.router.push({name:"buyCar"});
  },
  linkShop(){
    this.router.push({name:"shop"});
  },
  linkLogin(){
    this.router.push({name:"login"});
  },
  linkUser(){
    this.router.push({name:"user"});
  }
})

const storeGroup = reactive({
  store:useStore(),
  loginState:"",
  init(){
    this.loginState = this.store.state.user.userState.loginState
  }
})

storeGroup.init();

</script>

<template>
  <div class="pages">
    <div class="header-box">
      <div class="container">
        <div class="header">
          <div class="header-img">
            <img alt="logo" height="145" src="http://118.178.254.102:1252/logo.jpg">
          </div>
          <div class="header-menu">
            <ul>
              <li>
                <button class="link-btn" @click="routerGroup.linkHome()">首页</button>
              </li>
              <li>
                <button class="link-btn" @click="routerGroup.linkSellCar()">我要卖车</button>
              </li>
              <li>
                <button class="link-btn" @click="routerGroup.linkBuyCar()">我要买车</button>
              </li>
              <li>
                <button class="link-btn" @click="routerGroup.linkShop()">车之家商城</button>
              </li>
            </ul>
          </div>
          <div class="header-btn">
            <button v-show="!storeGroup.loginState" class="link-btn" @click="routerGroup.linkLogin()">登录</button>
            <img v-show="storeGroup.loginState" class="link-img" src="http://118.178.254.102:1252/head.jpg" alt="" @click="routerGroup.linkUser()"/>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
    <div class="footer-img">
      <img alt="footer-img" height="100" src="http://118.178.254.102:1252/index/index-footer-img.jpg">
    </div>
    <div class="footer-box">
      <div class="container">
        <div class="footer">
          <div class="footer-index">
            <ul>
              <li>关于我们</li>
              <li>友情链接</li>
              <li>广告指南</li>
              <li>服务指南</li>
              <li>帮助中心</li>
              <li>地区导航</li>
              <li>联系我们</li>
            </ul>
          </div>
          <div class="footer-text">
            <p>服务信箱：123456789@qq.com&nbsp;&nbsp;联系电话：400-800-0000&nbsp;&nbsp;收购：400-800-0000</p>
            <p>Copyright&nbsp;©&nbsp;2023-2024&nbsp;版权所有&nbsp;Localhost:80</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped src="../css/index.css">

</style>
